<template>
  <view class="memberInfo">
    <view class="title">
      <text>登录手机号：{{phone}}</text>
    </view>
    <view class="container">
      <view class="item" @click="changeName">
        <view class="item-left">
          <text class="item-text">宝宝昵称</text>
        </view>
        <view class="item-right">
          <text style="">{{name}}</text>
          <image src="https://cdn3.axureshop.com/demo/2027306/images/%E4%BC%9A%E5%91%98%E4%B8%AD%E5%BF%83/u885.svg"
            mode="aspectFit"></image>
        </view>
      </view>
      <view class="item" @click="selectAge">
        <view class="item-left">
          <text class="item-text">宝宝年龄</text>
        </view>
        <view class="item-right">
          <text style="">{{age}}</text>
          <image src="https://cdn3.axureshop.com/demo/2027306/images/%E4%BC%9A%E5%91%98%E4%B8%AD%E5%BF%83/u885.svg"
            mode="aspectFit"></image>
        </view>
      </view>
      <view class="item" @click="selecSex">
        <view class="item-left">
          <text class="item-text">宝宝性别</text>
        </view>
        <view class="item-right">
          <text style="">{{sex}}</text>
          <image src="https://cdn3.axureshop.com/demo/2027306/images/%E4%BC%9A%E5%91%98%E4%B8%AD%E5%BF%83/u885.svg"
            mode="aspectFit"></image>
        </view>
      </view>
    </view>
    <view class="btn">
      <button type="primary" @click="save">保存</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import {
    useMemberInfoStore
  } from '@/store/pinia/memberInfo'
  import {
    computed
  } from 'vue'

  const memberStore = useMemberInfoStore()
  const phone = computed(() => memberStore.memberInfo.phone)
  const name = computed(() => memberStore.memberInfo.name)
  const age = computed(() => memberStore.memberInfo.age)
  const sex = computed(() => memberStore.memberInfo.sex)
  const ageArr = ['2-4岁', '4-6岁', '6-8岁']
  const sexArr = ['男孩','女孩']
  const changeName = ()=>{
    uni.showModal({
      title:'宝宝昵称',
      editable:true,
      placeholderText:'宝宝昵称',
      success(res) {
        // console.log(res.content);
        if (res.confirm) {
          if(!res.content.trim()){
            return uni.showToast({
              icon:'none',
              title:'名称不能为空'
            })
          }else{
              memberStore.changeName(res.content)
              uni.showToast({
              icon:'none',
              title:'修改成功'
            })
           /* uni.showActionSheet({
            	itemList: ['A', 'B', 'C'],
            	success: function (res) {
            		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
            	},
            	fail: function (res) {
            		console.log(res.errMsg);
            	}
            }); */
          }
        }else{
          uni.showToast({
            icon:'none',
            title:'修改取消'
          })
        }
      },
      fail() {
        uni.showToast({
          icon:'none',
          title:'发生错误,失败!'
        })
      }
    })
  }
  const selectAge = ()=>{
    uni.showActionSheet({
     	itemList: ageArr,
      itemColor:'#15a0d3',
     	success: function (res) {
     		// console.log(ageArr[res.tapIndex]);
        if(memberStore.memberInfo.age === ageArr[res.tapIndex]) return
        memberStore.changeAge(ageArr[res.tapIndex])
        uni.$showMsg('修改成功!')
     	},
     	fail: function (res) {
     		uni.$showMsg('取消修改!')
     	}
     }); 
  }
 const selecSex = ()=>{
    uni.showActionSheet({
     	itemList: sexArr,
      itemColor:'#15a0d3',
     	success: function (res) {
     		// console.log(ageArr[res.tapIndex]);
        if(memberStore.memberInfo.sex === sexArr[res.tapIndex]) return
        memberStore.changeSex(sexArr[res.tapIndex])
        uni.$showMsg('修改成功!')
     	},
     	fail: function (res) {
     		uni.$showMsg('取消修改!')
     	}
     }); 
  }
  const save = ()=>{
    uni.$showMsg('保存成功!')
    setTimeout(()=>{
      uni.navigateBack()
    },1000)
  }
</script>

<style lang="scss">
  .memberInfo {
    color: #333;

    .title {
      height: 120rpx;
      text-align: center;
      line-height: 120rpx;
      border-bottom: 1px solid gray;
    }

    .container {
      font-family: 'Arial Normal', 'Arial', sans-serif;

      .item {
        box-sizing: border-box;
        border-bottom: 1px solid gray;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rpx 50rpx;
        height: 120rpx;

        .item-left {
          .item-text {
            font-size: 14px;
            color: #999;
          }
        }

        .item-right {
          image {
            width: 9px;
            height: 16px;
            vertical-align: middle;
            margin-left: 10rpx;
          }
        }
      }
    }
    .btn{
      margin-top: 100rpx;
      button{
        background-color: rgb(22,155,213);
      }
    }
  }
</style>
